<template>
	<view class="container">
		<h3 class="title"><span>{{userInfo.nickname}}</span>送给你<span>一份礼物</span> </h3>
		<!-- <div class="peopleItem">
			<p>分享人数：</p>
			<input type="number" value="1" placeholder="请输入分享人数" />
		</div> -->
		<view class="input-area">
			<textarea v-model="content" placeholder="输入消息..." />
			<!-- <button @click="send">发送</button> -->
			<button @click="showEmoji = !showEmoji" class="emojiBtn">😀</button>
			<div class="pickerSlide">
					<picker mode="selector" :range="array" @change="cyyTip">
						<view>请选择常用语</view>
					</picker>
			</div>
		</view>
		
		<!-- 表情面板 -->
		<view v-if="showEmoji" class="emoji-panel">
			<view class="emoji-tabs">
				<text @click="setCategory('people')" :class="{ active: category === 'people' }">😀 表情</text>
				<text @click="setCategory('nature')" :class="{ active: category === 'nature' }">🌿 自然</text>
				<text @click="setCategory('food')" :class="{ active: category === 'food' }">🍔 美食</text>
				<text @click="setCategory('activity')" :class="{ active: category === 'activity' }">⚽ 活动</text>
			</view>
			<view class="emoji-content">
				<text v-for="(item, index) in getCurrentEmojis" :key="index"
					@click="insertEmoji(item)">{{ item }}</text>
			</view>
		</view>
		<view class="gifImg" v-if="gifSrc">
			<image :src="gifSrc" mode="heightFix"></image>
		</view>
		<button class="button" v-if='!gifSrc' @click="toggle('bottom')"><text class="button-text">选择表情</text></button>
		<view class="list">
			<view class="items" v-for="(item, index) in shopList" :key="item.id">
				<image class="item-image" :src="item.thumb" mode="aspectFill"></image>
				<div class="r">
					<h3 class="title">{{item.title}}</h3>
					<view class="box">
						<p class="desc">库存量:{{item.num}}/{{item.specs}}</p>
						<view class="item-count">
						  <text class="count-btn" @click="changeCount(index, -1)">-</text>
						  <text class="count-num">{{item.count}}</text>
						  <text class="count-btn" @click="changeCount(index, 1)">+</text>
						</view>
					</view>
				</div>
			</view>
		</view>
	<button class="shareBtn"  @tap="toShare" v-if="!flage"><text class="button-text">生成分享卡片</text></button>
	<button class="shareBtn" open-type="share" v-if="flage"><text class="button-text">赠送好友</text></button>
		<view>
			<!-- 普通弹窗 -->
			<uni-popup ref="popup" background-color="#fff" >
				<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
					<view class="gifList">
						<view class="li" v-for="(item,index) in giftList" :key="index">
							<image :src="item" mode="" @tap="close(item)"></image>
						</view>
						
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import {
		request
	} from '@/utils/request.js'
	export default {
		data() {
			return {
				flage:false,
				shareTitle: '',
				      sharePath: '',
				      shareImageUrl: '',
				giftList:[],
				giftUrl:'',
				userInfo:{},
				shopList:[],
				gifSrc:'',
				content: '',
				messages: [],
				index:0,
				array: ['常用语1', '常用语2', '常用语3', '常用语4'],
				showEmoji: false,
				category: 'people',
				// 常用表情数据
				//   emojiData: {
				//          people: [' 😀 ', ' 😃 ', ' 😄 ', ' 😁 ', ' 😆 ', ' 😅 ', ' 😂 ', ' 🤣 ', ' 😊 ', ' 😇 ', ' 🙂 ', ' 🙃 ', ' 😉 ', ' 😌 ', ' 😍 ', ' 🥰 ', ' 😘 ', ' 😗 ', ' 😙 ', ' 😚 ', ' 😋 ', ' 😛 ', ' 😜 ', ' 🤪 ', ' 😝 ', ' 🤑 ', ' 🤗 ', ' 🤓 ', ' 😎 ', ' 🤩 ', ' 🥳 ', ' 😏 ', ' 😒 ', ' 😞 ', ' 😔 ', ' 😟 ', ' 😕 ', ' 🙁 ', ' ☹️ ', ' 😣 ', ' 😖 ', ' 😫 ', ' 😩 ', ' 🥺 ', ' 😢 ', ' 😭 ', ' 😤 ', ' 😠 ', ' 😡 ', ' 🤬 ', ' 🤯 ', ' 😳 ', ' 🥵 ', ' 🥶 ', ' 😱 ', ' 😨 ', ' 😰 ', ' 😥 ', ' 😓 '],
				// nature: [' 🌱 ', ' 🌲 ', ' 🌳 ', ' 🌴 ', ' 🌵 ', ' 🌾 ', ' 🌿 ', ' ☘️ ', ' 🍀 ', ' 🎍 ', ' 🎋 ', ' 🍃 ', ' 🍂 ', ' 🍁 ', ' 🌰 ', ' 🌼 ', ' 🌸 ', ' 💮 ', ' 🌹 ', ' 🥀 ', ' 🌺 ', ' 🌻 ', ' 🌼 ', ' 🌷 ', ' 💐 ', ' 🌱 ', ' 🌲 ', ' 🌳 ', ' 🌴 ', ' 🌵 ', ' 🌾 ', ' 🌿 ', ' ☘️ ', ' 🍀 ', ' 🎍 ', ' 🎋 ', ' 🍃 ', ' 🍂 ', ' 🍁 ', ' 🌰 '],
				//          food: [' 🍇 ', ' 🍈 ', ' 🍉 ', ' 🍊 ', ' 🍋 ', ' 🍌 ', ' 🍍 ', ' 🍎 ', ' 🍏 ', ' 🍐 ', ' 🍑 ', ' 🍒 ', ' 🍓 ', ' 🥝 ', ' 🍅 ', ' 🥑 ', ' 🍆 ', ' 🥔 ', ' 🥕 ', ' 🌽 ', ' 🌶️ ', ' 🥒 ', ' 🥬 ', ' 🥦 ', ' 🧄 ', ' 🧅 ', ' 🍄 ', ' 🥜 ', ' 🌰 ', ' 🍞 ', ' 🥐 ', ' 🥖 ', ' 🫓 ', ' 🥨 ', ' 🥯 ', ' 🍳 ', ' 🧈 ', ' 🧇 ', ' 🥞 ', ' 🧉 ', ' ☕ ', ' 🫖 ', ' 🍵 ', ' 🍶 ', ' 🍾 ', ' 🍷 ', ' 🍸 ', ' 🍹 ', ' 🍺 ', ' 🍻 ', ' 🥂 ', ' 🥃 ', ' 🧊 ', ' 🍶 '],
				//          activity: [' ⚽ ', ' 🏀 ', ' 🏈 ', ' ⚾ ', ' 🥎 ', ' 🎾 ', ' 🏐 ', ' 🏉 ', ' 🎱 ', ' 🪀 ', ' 🏓 ', ' 🏸 ', ' 🥊 ', ' 🥋 ', ' 🥅 ', ' ⛳ ', ' 🏌️ ', ' 🏑 ', ' 🏒 ', ' 🥍 ', ' 🏏 ', ' 🏑 ', ' 🎣 ', ' 🎽 ', ' 🚴 ', ' 🚵 ', ' 🏂 ', ' ⛷️ ', ' 🎿 ', ' 🏹 ', ' 🤺 ', ' 🎮 ', ' 🕹️ ', ' 🎲 ', ' 🃏 ', ' 🎯 ', ' 🏆 ', ' 🥇 ', ' 🥈 ', ' 🥉 ', ' 🏅 ', ' 🎖️ ', ' 🏵️ ', ' ⚽ ', ' 🏀 ', ' 🏈 ', ' ⚾ ', ' 🥎 ', ' 🎾 ', ' 🏐 ', ' 🏉 ']
				//        }
				emojiData: {
					people: ['😀', '😃 ', '😄', '😁', '😆', '😅', '😂', '🤣', '😊', '😇', '🙂', '🙃', '😉', '😌', '😍',
						'🥰', '😘', '😗', '😙', '😚', '😋', '😛', '😜', '🤪', '😝', '🤑', '🤗', '🤓', '😎', '🤩', '🥳',
						'😏', '😒', '😞', '😔', '😟', '😕', '🙁', '☹️', '😣', '😖', '😫', '😩', '🥺', '😢', '😭', '😤',
						'😠', '😡', '🤬', '🤯', '😳', '🥵', '🥶', '😱', '😨', '😰', '😥', '😓'
					],
					nature: ['🌱', '🌲', '🌳', '🌴', '🌵', '🌾', '🌿', '☘️', '🍀', '🎍', '🎋', '🍃', '🍂', '🍁', '🌰',
						'🌼', '🌸', '💮', '🌹', '🥀', '🌺', '🌻', '🌼', '🌷', '💐', '🌱', '🌲', '🌳', '🌴', '🌵', '🌾',
						'🌿', '☘️', '🍀', '🎍', '🎋', '🍃', '🍂', '🍁', '🌰'
					],
					food: ['🍇', '🍈', '🍉', '🍊', '🍋', '🍌', '🍍', '🍎', '🍏', '🍐', '🍑', '🍒', '🍓', '🥝', '🍅', '🥑',
						'🍆', '🥔', '🥕', '🌽', '🌶️', '🥒', '🥬', '🥦', '🧄', '🧅', '🍄', '🥜', '🌰', '🍞', '🥐',
						'🥖', '🫓', '🥨', '🥯', '🍳', '🧈', '🧇', '🥞', '🧉', '☕', '🫖', '🍵', '🍶', '🍾', '🍷', '🍸',
						'🍹', '🍺', '🍻', '🥂', '🥃', '🧊', '🍶'
					],
					activity: ['⚽', '🏀', '🏈', '⚾', '🥎', '🎾', '🏐', '🏉', '🎱', '🪀', '🏓', '🏸', '🥊', '🥋', '🥅', '⛳',
						'🏌️', '🏑', '🏒', '🥍', '🏏', '🏑', '🎣', '🎽', '🚴', '🚵', '🏂', '⛷️', '🎿', '🏹', '🤺',
						'🎮', '🕹️', '🎲', '🃏', '🎯', '🏆', '🥇', '🥈', '🥉', '🏅', '🎖️', '🏵️', '⚽', '🏀', '🏈',
						'⚾', '🥎', '🎾', '🏐', '🏉'
					]
				}
			}
		},
		onLoad(options) {
			console.log(JSON.parse(decodeURIComponent(options.items)))
			if(options.items){
				this.shopList = JSON.parse(decodeURIComponent(options.items))
				this.shopList = this.shopList.map(item => ({
				  ...item,
				  count: parseInt(item.count || 1)
				}))
			}
			console.log(uni.getStorageSync('userInfo'))
			if (uni.getStorageSync('userInfo')) {
				this.getUserInfo()
				// this.userInfo = uni.getStorageSync('userInfo')
			}
			this.getGif()
		  // #ifdef MP-WEIXIN
		  wx.hideShareMenu(); // 隐藏右上角分享按钮
		  // #endif
		},
		computed: {
			getCurrentEmojis() {
				return this.emojiData[this.category] || [];
			}
		},
		onShareAppMessage() {
			return {
				// title: '某某某送你一份冰火泉的礼物，希望你能收下', // 分享标题
				// path:"pages/friendPage/friendPage", // 分享路径，默认当前页面路径
				// imageUrl: '/static/images/shop1.jpg', // 分享图片
				  title: this.shareTitle,
				      path: this.sharePath,
				      imageUrl: this.shareImageUrl,
				success(res) {
					console.log('分享成功', res);
				},
				fail(err) {
					console.log('分享失败', err);
				}
			}
		},
		methods: {
			toShare(){ 
				let params={
					godown:'',
					content:this.content,
					imgs:this.gifSrc
				}
				params.godown =JSON.stringify(this.shopList.map(({ id, count }) => ({ id, num: count })));
				console.log(222222,params.godown)
				request({
					url: 'user/godown-share',
					method: 'post',
					data: params
				}).then(res => {
					if(res.status==200){
						this.shareTitle=`${this.userInfo.nickname}送你一份冰火泉的礼物，希望你能收下`;
						this.sharePath=`pages/friendPage/friendPage?order_sn=${res.data.order_sn}`
						this.shareImageUrl=this.shopList[0].thumb;
						this.flage = true
						uni.showToast({
							title: '赠送卡片已生成,请点击按钮或者右上角来分享给好友吧',
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			// 获取gif
			getGif(){
				request({
					url: 'site/get-gif',
					method: 'get',
					data: {
					}
				}).then(res => {
					if(res.status==200){
						this.giftList = res.data
					}
				})
			},
			getUserInfo() {
				request({
					url: 'user/center',
					method: 'get',
					data: {
					}
				}).then(res => {
					if(res.status==200){
						this.userInfo = res.data
					}
				})
			
			},
			cyyTip(e){
				console.log(e.detail.value)
				let val = e.detail.value;
				if(val!==0){
					this.content += this.array[val];
				}
				this.index=0
			},
			setCategory(category) {
				this.category = category;
			},
			insertEmoji(emoji) {
				this.content += emoji;
			},
			send() {
				if (this.content.trim()) {
					this.messages.push(this.content);
					this.content = '';
					this.showEmoji = false;
				}
			},
			toggle(type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
			close(src){
				console.log(src)
				this.gifSrc = src
				this.$refs.popup.close()
			},
			// 修改商品数量
			changeCount(index, num) {
			  const newCount = this.shopList[index].count*1 + num*1;
			  console.log(newCount)
			  if(newCount>this.shopList[index].num){
				  uni.showToast({
				    title: '商品数量不能超过当前库存数量',
				    icon: 'none'
				  })
				  return
			  }
			  if (newCount < 1) {
			    uni.showToast({
			      title: '商品数量不能少于1',
			      icon: 'none'
			    })
			    return
			  }
			  if (newCount > 99) {
			    uni.showToast({
			      title: '商品数量不能超过99',
			      icon: 'none'
			    })
			    return
			  }
			  this.shopList[index].count = newCount
			  this.$forceUpdate()
			},
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 20rpx;
	}

	.input-area {
		align-items: center;
		margin-bottom: 20rpx;
		position: relative;

		textarea {
			border: 1px solid #eee;
			width: 100%;
			height: 300rpx;
			border-radius: 10rpx;
			padding: 15rpx;
			font-size: 28rpx;
			box-sizing: border-box;
		}

		.emojiBtn {
			position: absolute;
			right: 0;
			bottom: 0;
			z-index: 9;
		}
	}

	.input-area input {
		flex: 1;
		margin: 0 10rpx;
		padding: 10rpx;
		border: 1rpx solid #eee;
		border-radius: 5rpx;
	}

	.emoji-panel {
		background: #fff;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.emoji-tabs {
		display: flex;
		border-bottom: 1rpx solid #eee;
		padding: 10rpx;
	}

	.emoji-tabs text {
		padding: 10rpx 20rpx;
		margin-right: 10rpx;
		border-radius: 5rpx;
	}

	.emoji-tabs text.active {
		background: #f0f0f0;
	}

	.emoji-content {
		display: flex;
		flex-wrap: wrap;
		padding: 10rpx;
	}

	.emoji-content text {
		font-size: 28rpx;
		padding: 10rpx;
		width: 60rpx;
		text-align: center;
	}

	.message-list view {
		padding: 10rpx 0;
		border-bottom: 1rpx solid #eee;
	}

	.title {
		text-align: center;
		font-size: 32rpx;
		margin-bottom: 30rpx;

		span {
			color: red;
		}
	}
	.gifList{
		display: flex;
		flex-wrap: wrap;
		.li{
			width: 180rpx;
			height: 180rpx;
			padding: 10rpx;
			box-sizing: border-box;
			image{
				width: 100%;
				height: 100%;
			}
		}
	}
	.gifImg{
		image{
			height: 300rpx;
			display: block;
			margin: 0 auto;
		}
	}
.list {
	margin-top: 30rpx;
		.items {
			box-sizing: border-box;
			box-shadow: 0 0 14px rgba(0, 0, 0, .1);
			height: 258rpx;
			padding: 12rpx;
			margin-bottom: 30rpx;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			position: relative;
			.box{
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			image {
				height: 228rpx;
				width: 228rpx;
				margin-right: 20rpx;
			}

			.add {
				background: url(/static/images/add.png) no-repeat;
				background-size: 100% 100%;
				width: 50rpx;
				height: 50rpx;
				display: block;
				position: absolute;
				bottom: 12rpx;
				right: 12rpx;
			}

			.r {
				width: 200rpx;
				height: 100%;
				padding: 20rpx 0;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				flex: 1;

				.title {
					font-size: 32rpx;
					text-align: left;
				}

				.desc {
					font-size: 28rpx;
					color: #666;
				}
				.price{
					color: #4a90e2;
					font-size: 25rpx;
					span{
						font-size: 32rpx;
					}
				}
			}
		}
	}
	.shareBtn{
		width: 300rpx;
		background-color: #e74c3c;
		color: #fff;
	}
	.pickerSlide{
		position: absolute;
		left: 0;
		bottom: 0;
		width: 200rpx;
		height: 60rpx;
		line-height: 60rpx;
		z-index: 9;
		font-size: 28rpx;
		text-align: center;
		    color: #666;
			padding: 0 20rpx;
			background-color: #f8f8f8;;
			border: 1px solid #eee;
			border-top-right-radius: 10rpx;
	}
	.item-count {
		display: flex;
		align-items: center;
	}
	
	.count-btn {
		width: 50rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		border: 1rpx solid #ddd;
		font-size: 32rpx;
	}
	
	.count-num {
		width: 70rpx;
		text-align: center;
		font-size: 28rpx;
	}
	.peopleItem{
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
		p{
			font-size: 28rpx;
			color: #666;
		}
		input{
			border-radius: 10rpx;
			flex: 1;
			height: 60rpx;
			font-size: 28rpx;
			padding-left: 20rpx;
			border: 1px solid #eee;
		}
	}
</style>